<!--
 * @Author: zww
 * @Date: 2021-08-04 09:35:53
 * @LastEditTime: 2021-08-05 14:13:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuestudy\vue\13-左侧菜单\01-左侧导航目录.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/leftmenu.css">
  <!-- 組件的引入要放在上面不然報錯 Unknown custom element: <left-menu> - did you register the component correctly? 
      For recursive components, make sure to provide the "name" option. -->
  <script src="./components/leftmenu.js"></script>
  <title>Title</title>
</head>
<body>
  <div id="app">
    <left-menu :list="listmenu" :position="200"></left-menu>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          listmenu: [{
              show: false,
              icon: "",
              name: "学生管理",
              children: [{
                  icon: "",
                  name: "添加学生",
                },
                {
                  icon: "",
                  name: "查询学生",
                },
                {
                  icon: "",
                  name: "学生权限",
                },
              ],
            },
            {
              show: false,
              icon: "",
              name: "员工管理",
              children: [{
                  icon: "",
                  name: "添加员工",
                },
                {
                  icon: "",
                  name: "查询员工",
                },
                {
                  icon: "",
                  name: "员工权限",
                },
              ],
            },
            {
              show: false,
              icon: "",
              name: "档案管理",
              children: [{
                  icon: "",
                  name: "添加学生档案",
                },
                {
                  icon: "",
                  name: "查询学生档案",
                },
                {
                  icon: "",
                  name: "学生权限",
                },
              ],
            },
          ],
        };
      },
    })
  </script>
</body>
</html>